<template>
	<view class="rel-name-page">
		<view class="rel-name-input">
			<u--input placeholder="请输入真实姓名" border="none" shape="circle" class="inpt" v-model="nameValue"> </u--input>
			<u--input placeholder="请输入身份证号码" maxlength="18" border="none" shape="circle" class="inpt" v-model="value"></u--input>
		</view>
		<u-button text="开始认证" shape="circle" color=" #4ABC5A" class="start-button" @click="showPopup"></u-button>
		<!-- <view class="note-one">
			实名之后手机号不可修改，请确认手机号是否与实名信息一致
		</view> -->
		<view class="note-two"> 实名身份信息需与手机号绑定身份一致，同一实名信息仅可实名认证一个手机号，实名之后手机号不可修改 </view>
		<popup :title="popupName" content="实名认证后不可修改<br/>请确认填写的信息无误" ref="popupRef" @reserved="reserved"> </popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
const BizCode = {
	1: "核验一致",
	2: "核验不一致",
	3: "查无记录。",
};

const SubCode = {
	101: "验证通过",
	201: "手机号和姓名不一致，手机号和证件号不一致。",
	202: "手机号和姓名一致，手机号和证件号不一致。",
	203: "手机号和证件号一致，手机号和姓名不一致。",
	204: "其他不一致。",
	301: "查无记录",
};

// import { relNameConfirm } from '@/api/user.js'
import { verifyRealName } from "@/api/ring/user.js";
import popup from "./common/popup.vue";
import { mapState } from "vuex";
export default {
	components: {
		popup,
	},
	data() {
		return {
			value: "",
			nameValue: "",
			popupName: "",
		};
	},
	computed: {
		...mapState({
			user: (state) => state.userInfo,
		}),
	},
	methods: {
		showPopup() {
			if (!(this.value && this.nameValue)) {
				uni.showToast({
					title: "请填写姓名和身份证号",
					icon: "none",
				});
				return;
			}
			if (this.value.length !== 18) {
				uni.showToast({
					title: "请输入正确的身份证号",
					icon: "none",
				});
				return;
			}
			this.$refs.popupRef.open();
			this.popupName = "确定实名认证吗？";
		},
		reserved() {
			this.relName();
		},
		//消息提示
		showToast(msg) {
			this.$refs.uToast.show({
				type: "default",
				message: msg,
			});
		},
		async relName() {
			try {
				const res = await verifyRealName({
					idCardNum: this.value,
					mobile: this.user.mobile,
					name: this.nameValue,
				});
				console.log("res 实名认证结果", res);

				this.$refs.popupRef.close();


				const data = res.data;
				const body = data.body;


				if (body.code != 200) {
					this.showToast(body.message);
					return;
				} else {
					if (!body.resultObject) return this.showToast("认证失败");
					const { bizCode, subCode } = body.resultObject;
					if (bizCode != 1) {
						this.showToast(`${BizCode[bizCode]}, ${SubCode[subCode]}`);
						return;
					}
				}


				this.showToast("认证成功");
				this.$store.dispatch("getUserInfo");
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} catch (e) {
				console.log(e);
				this.showToast(e.message || e.data);
				this.$refs.popupRef.close();
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.rel-name-page {
	padding: 0 40rpx;

	.rel-name-input {
		.inpt {
			background-color: #f7f7f7;
			height: 90rpx;
		}

		.inpt:first-child {
			margin: 71rpx 0 30rpx;
		}
	}

	.start-button {
		margin: 60rpx 0;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.note-one {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8f9091;
	}

	.note-two {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8f9091;
		line-height: 42rpx;
		margin-top: 33rpx;
	}

	::v-deep .uni-input-input {
		padding-left: 20px;
	}
}

::v-deep.input-placeholder {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #b3b4b5;
	padding-left: 40rpx;
}
</style>
